﻿var get_type = 0, get_vertical = 0, get_horizontal = 0;
var edit = 0, del_row=0;
function chonbang(evt, bang) {
    var i, x, tablinks;
    x = document.getElementsByClassName("apb-content");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("apb-link");
    for (i = 0; i < x.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" w3-white w3-border-teal", " w3-grey w3-border-grey");
    }
    document.getElementById(bang).style.display = "block";
    evt.currentTarget.className = evt.currentTarget.className.replace(" w3-grey w3-border-grey", " w3-white w3-border-teal");
}
function add_speak_five(that) {
    $(that).animate({ "height": "toggle" }, "fast");
    $(that).parent().parent().children(".add-apb-speak-five").animate({ "height": "toggle" }, "fast");
}
function cancel_add_speak_five(that) {
    $(that).parent().parent().animate({ "height": "toggle" }, "fast");
    $(that).parent().parent().parent().find(".add-apb-speak-five-btn").animate({ "height": "toggle" }, "fast");
    $(".apb-item").removeClass("w3-light-grey");
    $(".add-apb-item-btn").removeClass("w3-light-grey");
    $("#add-apb-item-form").css("display", "none");
    $("#edit-apb-item-form").css("display", "none");
    $("#apb-tutorial-text").css("display", "block");
}
function add_apb_select_hiragana(type, horizontal) {
    var vertical = document.getElementsByClassName("hiragana-row").length;
    get_vertical = ++vertical;
    get_type = type;
    get_horizontal = horizontal;
}
function add_apb_select_katakana(type, horizontal) {
    var vertical = document.getElementsByClassName("katakana-row").length;
    get_vertical = ++vertical;
    get_type = type;
    get_horizontal = horizontal;
}
function apb_select(type, vertical, horizontal) {
    get_type = type;
    get_vertical = vertical;
    get_horizontal = horizontal;
}
function add_apb_item(slot) {
    $(".apb-item").removeClass("w3-light-grey");
    $(".add-apb-item-btn").removeClass("w3-light-grey");
    $(slot).addClass("w3-light-grey");
    $("#add-apb-item-form").css("display", "block");
    $("#edit-apb-item-form").css("display", "none");
    $("#apb-tutorial-text").css("display", "none");
    $("#add-apb-face").focus();
    $(".apb-writing-preview").html("").css("display", "none");
}
function edit_apb_item(id, apb) {
    edit = id;
    $(".add-apb-item-btn").removeClass("w3-light-grey");
    $("#add-apb-item-form").css("display", "none");
    $("#edit-apb-item-form").css("display", "block");
    $("#apb-tutorial-text").css("display", "none");
    $(".apb-item").removeClass("w3-light-grey");
    $("#edit-apb-face").val($(apb).children(".apb-jp").html());
    $("#edit-apb-audio-src").val($(apb).children(".apb-audio-src").html());
    $("#edit-apb-trans").val($(apb).children(".apb-vn").html());
    $("#edit-apb-img-src").val($(apb).children(".apb-img-src").html());
    var svg = $("#edit-apb-img-src").val();
    $("#edit-apb-img").hide();
    $(".apb-writing-preview").html(svg).css("display", "block");
    window.signature.initialize("apb-writing-preview");
    return setTimeout(function () {
        return window.signature.animate("apb-writing-preview");
    }, 0);
    //$("#edit-apb-img").attr("src", $(apb).children(".apb-img-src").html());
    //edit_check_img_file();
    //edit_check_snd_file();
}
function delete_apb_five(id,row) {
    $("#delete-apb-five-modal").css("display", "block");
    get_type = id;
    del_row = row;
}
function delete_apb_item() {
    $("#delete-apb-item-modal").css("display", "block");
}
function btn_accept_del_apb() {
    var xhttp;
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            location.reload(true);
        }
    };
    xhttp.open("GET", "../ajax/asp/alphabets/del_apb.aspx?id=" + edit, true);
    xhttp.send();
}
function btn_accept_del_row() {
    var xhttp;
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            location.reload(true);
        }
    };
    xhttp.open("GET", "../ajax/asp/alphabets/del_row_apb.aspx?type=" + get_type + "&row="+ del_row, true);
    xhttp.send();
}
function edit_check_img_file() {
    var link = document.getElementById("edit-apb-img-src").value;
    var xhttp;
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("edt_check_exits_img").innerHTML = xhttp.responseText;

            var check = document.getElementById("edt_check_exits_img").getElementsByClassName("file_checked")[0].innerHTML;
            if (check == "1") {
                document.getElementById("edit-apb-img").src = link;
            }
            if (check == "0")
                document.getElementById("edit-apb-img").src = "../Content/testdata/picture/no_image.png";
        }
    };
    xhttp.open("GET", "../ajax/asp/alphabets/check_img_file.aspx?link=" + link, true);
    xhttp.send();
}

function edit_check_snd_file() {
    var link = document.getElementById("edit-apb-audio-src").value;
    var xhttp;
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("edt_check_exits_snd").innerHTML = xhttp.responseText;
        }
    };
    xhttp.open("GET", "../ajax/asp/alphabets/check_img_file.aspx?link=" + link, true);
    xhttp.send();
}
$(document).ready(function () {
    $(".check_snd_file").click(function () {
        var link = document.getElementById("add-apb-audio-src").value;
        var xhttp;
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("check_exits_snd").innerHTML = xhttp.responseText;

                var checked = document.getElementById("check_exits_snd").getElementsByClassName("file_checked")[0].innerHTML;
                if (checked == "1") {
                    document.getElementById("apb-audio").src = link;
                    document.getElementById("apb-audio").play();
                }
                if (checked == "0") {
                    document.getElementById("error_content").innerHTML = "Không tồn tại file này!";
                    document.getElementById("error-modal").style.display = "block";
                    setTimeout('$("#error-modal").fadeOut()', 3000);
                }
            }
        };
        xhttp.open("GET", "../ajax/asp/alphabets/check_img_file.aspx?link=" + link, true);
        xhttp.send();
    });
    //$(".check_img_file").click(function () {
    //    var link = document.getElementById("add-apb-img-src").value;
    //    var xhttp;
    //    xhttp = new XMLHttpRequest();
    //    xhttp.onreadystatechange = function () {
    //        if (xhttp.readyState == 4 && xhttp.status == 200) {
    //            document.getElementById("check_exits_img").innerHTML = xhttp.responseText;

    //            var check = document.getElementById("check_exits_img").getElementsByClassName("file_checked")[0].innerHTML;
    //            if (check == "1") {
    //                document.getElementById("add-apb-img").src = link;
    //            }
    //            if (check == "0")
    //                document.getElementById("add-apb-img").src = "../Content/testdata/picture/no_image.png";
    //        }
    //    };
    //    xhttp.open("GET", "../ajax/asp/alphabets/check_img_file.aspx?link=" + link, true);
    //    xhttp.send();
    //});
    $(".apb-preview-svg-btn").click(function () {
        var svg = $("#add-apb-img-src").val();
        $("#add-apb-img").hide();
        $(".apb-writing-preview").html(svg).css("display", "block");
        window.signature.initialize("apb-writing-preview");
        return setTimeout(function () {
            return window.signature.animate("apb-writing-preview");
        }, 0);
    })
    $(".edit_check_snd_file").click(function () {
        var link = document.getElementById("edit-apb-audio-src").value;
        var xhttp;
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("edt_check_exits_snd").innerHTML = xhttp.responseText;

                var checked = document.getElementById("edt_check_exits_snd").getElementsByClassName("file_checked")[0].innerHTML;
                if (checked == "1") {
                    document.getElementById("apb-audio").src = link;
                    document.getElementById("apb-audio").play();
                }
                if (checked == "0") {
                    document.getElementById("error_content").innerHTML = "Không tồn tại file này!";
                    document.getElementById("error-modal").style.display = "block";
                    setTimeout('$("#error-modal").fadeOut()', 3000);
                }
            }
        };
        xhttp.open("GET", "../ajax/asp/alphabets/check_img_file.aspx?link=" + link, true);
        xhttp.send();
    });
    $(".apb-preview-edit-svg-btn").click(function () {
        var svg = $("#edit-apb-img-src").val();
        $("#edit-apb-img").hide();
        $(".apb-writing-preview").html(svg).css("display", "block");
        window.signature.initialize("apb-writing-preview");
        return setTimeout(function () {
            return window.signature.animate("apb-writing-preview");
        }, 0);
    })
    //$(".edit_check_img_file").click(function () {
    //    var link = document.getElementById("edit-apb-img-src").value;
    //    var xhttp;
    //    xhttp = new XMLHttpRequest();
    //    xhttp.onreadystatechange = function () {
    //        if (xhttp.readyState == 4 && xhttp.status == 200) {
    //            document.getElementById("edt_check_exits_img").innerHTML = xhttp.responseText;

    //            var check = document.getElementById("edt_check_exits_img").getElementsByClassName("file_checked")[0].innerHTML;
    //            if (check == "1") {
    //                document.getElementById("edit-apb-img").src = link;
    //            }
    //            if (check == "0")
    //                document.getElementById("edit-apb-img").src = "../Content/testdata/picture/no_image.png";
    //        }
    //    };
    //    xhttp.open("GET", "../ajax/asp/alphabets/check_img_file.aspx?link=" + link, true);
    //    xhttp.send();
    //});

    //$("#add-apb-audio-src").on("change", function () {
    //    var link = this.value;

    //    var xhttp;
    //    xhttp = new XMLHttpRequest();
    //    xhttp.onreadystatechange = function () {
    //        if (xhttp.readyState == 4 && xhttp.status == 200) {
    //            document.getElementById("check_exits_snd").innerHTML = xhttp.responseText;
    //        }
    //    };
    //    xhttp.open("GET", "../ajax/asp/alphabets/check_img_file.aspx?link=" + link, true);
    //    xhttp.send();
    //});

    //$("#add-apb-img-src").on("change", function () {
    //    var link = this.value;

    //    var xhttp;
    //    xhttp = new XMLHttpRequest();
    //    xhttp.onreadystatechange = function () {
    //        if (xhttp.readyState == 4 && xhttp.status == 200) {
    //            document.getElementById("check_exits_img").innerHTML = xhttp.responseText;
    //            var check = document.getElementById("check_exits_img").getElementsByClassName("file_checked")[0].innerHTML;

    //            if (check == "1") {
    //                document.getElementById("add-apb-img").src = link;
    //            }
    //            if (check == "0")
    //                document.getElementById("add-apb-img").src = "../Content/testdata/picture/no_image.png";
    //        }
    //    };
    //    xhttp.open("GET", "../ajax/asp/alphabets/check_img_file.aspx?link=" + link, true);
    //    xhttp.send();
    //});

    //$("#edit-apb-audio-src").on("change", function () {
    //    var link = this.value;
    //    var xhttp;
    //    xhttp = new XMLHttpRequest();
    //    xhttp.onreadystatechange = function () {
    //        if (xhttp.readyState == 4 && xhttp.status == 200) {
    //            document.getElementById("edt_check_exits_snd").innerHTML = xhttp.responseText;
    //        }
    //    };
    //    xhttp.open("GET", "../ajax/asp/alphabets/check_img_file.aspx?link=" + link, true);
    //    xhttp.send();
    //});

    //$("#edit-apb-img-src").on("change", function () {
    //    var link = this.value;
    //    var xhttp;
    //    xhttp = new XMLHttpRequest();
    //    xhttp.onreadystatechange = function () {
    //        if (xhttp.readyState == 4 && xhttp.status == 200) {
    //            document.getElementById("edt_check_exits_img").innerHTML = xhttp.responseText;

    //            var check = document.getElementById("edt_check_exits_img").getElementsByClassName("file_checked")[0].innerHTML;
    //            if (check == "1") {
    //                document.getElementById("edit-apb-img").src = link;
    //            }
    //            if (check == "0")
    //                document.getElementById("edit-apb-img").src = "../Content/testdata/picture/no_image.png";
    //        }
    //    };
    //    xhttp.open("GET", "../ajax/asp/alphabets/check_img_file.aspx?link=" + link, true);
    //    xhttp.send();
    //});

    $(".apb-box").click(function () {
        $(".apb-box").removeClass("apb-selected");
        $(this).addClass("apb-selected");
    });

    $(".check-apb-item-btn").click(function () {
        var char = document.getElementById("add-apb-face").value;
        var check_audio = document.getElementById("check_exits_snd").getElementsByClassName("file_checked")[0].innerHTML;
        var audio = document.getElementById("add-apb-audio-src").value;
        var trans = document.getElementById("add-apb-trans").value;
        var check_img = document.getElementById("check_exits_img").getElementsByClassName("file_checked")[0].innerHTML;
        var img = document.getElementById("add-apb-img-src").value;
        if (char.trim() == "") {
            document.getElementById("error_content").innerHTML = "Chữ cái không được để trống";
            document.getElementById("error-modal").style.display = "block";
            setTimeout('$("#error-modal").fadeOut()', 3000);
        }
        else {
            if (check_audio != "1") {
                document.getElementById("error_content").innerHTML = "File phát âm không tồn tại";
                document.getElementById("error-modal").style.display = "block";
                setTimeout('$("#error-modal").fadeOut()', 3000);
            }
            else {
                if (trans.trim() == "") {
                    document.getElementById("error_content").innerHTML = "Phiên âm không được để trống";
                    document.getElementById("error-modal").style.display = "block";
                    setTimeout('$("#error-modal").fadeOut()', 3000);
                }
                else {
                    
                        var xhttp;
                        xhttp = new XMLHttpRequest();
                        xhttp.onreadystatechange = function () {
                            if (xhttp.readyState == 4 && xhttp.status == 200) {
                                location.reload(true);
                                //document.getElementsByClassName("apb-selected")[0].innerHTML = xhttp.responseText;
                                //document.getElementById("success_content").innerHTML = "Thêm chữ cái thành công.";
                                //document.getElementById("success-modal").style.display = "block";
                                //setTimeout('$("#success-modal").fadeOut()', 3000);
                                //$(".apb-box").removeClass("apb-selected");
                                //$(".apb-item").click(function () {
                                //    if ($(apb_audio).hasClass("speaking-five")) { }
                                //    else {
                                //        $(apb_audio).addClass("speaking-one");
                                //        apb_speak(this);
                                //        apb_audio.addEventListener("ended", apb_speak_end, false);
                                //        //$(".apb-speakable-btn").click(function () {
                                //        //    $(this).css({ "color": "black", "cursor": "default" });
                                //        //    apb_audio.play();
                                //        //    apb_audio.addEventListener("ended", apb_speak_end, false);
                                //        //})
                                //    }
                                //});
                                //$(".apb-box").click(function () {
                                //    $(".apb-box").removeClass("apb-selected");
                                //    $(this).addClass("apb-selected");
                                //});
                                //document.getElementById("add-apb-face").value = "";
                                //document.getElementById("add-apb-audio-src").value = "";
                                //document.getElementById("add-apb-trans").value = "";
                                //document.getElementById("add-apb-img-src").value = "";
                                //document.getElementById("add-apb-img").src = "../Content/testdata/picture/no_image.png";
                            }
                        };
                        xhttp.open("POST", "../ajax/asp/alphabets/add_apb.aspx", true);
                        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                        xhttp.send("type=" + get_type + "&char=" + char + "&audio=" + audio + "&trans=" + trans + "&img=" + img + "&vertical=" + get_vertical + "&horizontal=" + get_horizontal);
                    
                }
            }
        }
    });

    $(".save-apb-item-btn").click(function () {

        var char = document.getElementById("edit-apb-face").value;
        var check_audio = document.getElementById("edt_check_exits_snd").getElementsByClassName("file_checked")[0].innerHTML;
        var audio = document.getElementById("edit-apb-audio-src").value;
        var trans = document.getElementById("edit-apb-trans").value;
        var check_img = document.getElementById("edt_check_exits_img").getElementsByClassName("file_checked")[0].innerHTML;
        var img = document.getElementById("edit-apb-img-src").value;
        if (char.trim() == "") {
            document.getElementById("error_content").innerHTML = "Chữ cái không được để trống";
            document.getElementById("error-modal").style.display = "block";
            setTimeout('$("#error-modal").fadeOut()', 3000);
        }
        else {
            
                if (trans.trim() == "") {
                    document.getElementById("error_content").innerHTML = "Phiên âm không được để trống";
                    document.getElementById("error-modal").style.display = "block";
                    setTimeout('$("#error-modal").fadeOut()', 3000);
                }
                
                    else {
                        var xhttp;
                        xhttp = new XMLHttpRequest();
                        xhttp.onreadystatechange = function () {
                            if (xhttp.readyState == 4 && xhttp.status == 200) {
                                location.reload(true);
                            }
                        };
                        xhttp.open("POST", "../ajax/asp/alphabets/edit_apb.aspx", true);
                        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                        xhttp.send("id=" + edit + "&char=" + char + "&audio=" + audio + "&trans=" + trans + "&img=" + img);
                    }
               
            
        }

    });
    var apb_audio = document.getElementById("apb-audio");
    var playlist, tracks, current, first_apb, len;

    function apb_speak(apb) {
        var audio_src = $(apb).children(".apb-audio-src").html();
        $(".apb-item").removeClass("w3-light-grey");
        if (audio_src != "") {
            $(apb).addClass("w3-light-grey");
            apb_audio.src = audio_src;
            apb_audio.play();
        }
        else {
            alert("Không tìm thấy âm thanh");
            return false;
        }
    }

    function apb_speak_five(apb_list) {
        current = 0;
        playlist = $(apb_list);
        tracks = playlist.find(".apb-item");
        len = tracks.length;
        if (len > 0) {
            $(".apb-speak-five-btn").removeClass("w3-teal");
            $(apb_list).find(".apb-speak-five-btn").addClass("w3-teal");
            first_apb = playlist.find(".apb-item")[0];
            apb_speak(first_apb);
        }
    }


    $(".apb-item").click(function () {
        if ($(apb_audio).hasClass("speaking-five")) { }
        else {
            $(apb_audio).addClass("speaking-one");
            apb_speak(this);
            apb_audio.addEventListener("ended", apb_speak_end, false);
            //$(".apb-speakable-btn").click(function () {
            //    $(this).css({ "color": "black", "cursor": "default" });
            //    apb_audio.play();
            //    apb_audio.addEventListener("ended", apb_speak_end, false);
            //})
        }
    });

    var apb_speak_end = function () {
        $(apb_audio).removeClass("speaking-one");
    }

    $(".apb-speak-five-btn").click(function () {
        var vertical = this.getElementsByClassName("snd_vertical")[0].innerHTML;
        if ($(apb_audio).hasClass("speaking-one")) { }
        else {
            $(apb_audio).addClass("speaking-five");
            $(".apb-item").removeClass("w3-light-grey");
            $(".add-apb-item-btn").removeClass("w3-light-grey");
            $("#add-apb-item-form").css("display", "none");
            $("#edit-apb-item-form").css("display", "none");
            $("#apb-tutorial-text").css("display", "block");
            apb_speak_five(this.parentElement.parentElement);
            apb_audio.addEventListener("ended", apb_speak_five_end, false);
        }
    });

    var apb_speak_five_end = function () {
        if ($(apb_audio).hasClass("speaking-five")) {
            current++;
            if (current == len) {
                $(".apb-item").removeClass("w3-light-grey");
                $(".apb-speak-five-btn").removeClass("w3-teal");
                apb_audio.src = "";
                $(apb_audio).removeClass("speaking-five");
            }
            else {
                var next_apb = playlist.find(".apb-item")[current];
                apb_speak(next_apb);
            }
        }
    }
})